<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:组织管理详情组件
* @fileName:organization-details.vue
* @author:zhouyongjie@yzbdl.ac.cn
* @date:2022-4-6
!-->
<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import OrganizationEditor from "./drawer/organization-editor.vue";
//引入调用接口方法
import { getCurrentInstance } from "vue";
import { showErrorMessage, showSuccessMessage } from "@/common/message";
const { proxy } = getCurrentInstance() as any;
//接收父组件传值
const props = defineProps({
  tableData: Array as any,
  deleteFunc: Function as any,
  fresFunc: Function as any,
  // 数据列表加载动画
  isListLoading: {
    type: Boolean,
    default: false,
  },
});
//控制新增弹窗显隐
const editdrawershow = ref(false);
const editdirection = ref("rtl");
let editItem = reactive({
  list: [] as any,
});
//监听编辑弹窗显示隐藏
watch(editdrawershow, () => {
  props.fresFunc(editdrawershow.value);
});

/**
 * @description:删除函数
 * @param {any} item
 * @return void
 */
const handleDelete = (item: any) => {
  const res = proxy.$HTTP.delete({
    url: `/manager/org/${item.id}`,
  });
  res.then((res: any) => {
    if (res.isOk) {
      console.log("res", res);
      props.deleteFunc(res.isOk);
      showSuccessMessage({
        message: "删除成功",
      });
    }
  });
  res.catch((error: any) => {
    if (error.data instanceof Array) {
      showErrorMessage({
        message: error.data[0].errorMsg,
      });
    } else {
      showErrorMessage({
        message: error.data,
      });
    }
  });
};

/**
 * @description:编辑弹窗传值函数
 * @param {any} item
 * @return void
 */
const handleEditFunc = (item: any) => {
  editdrawershow.value = false;
};
const handleEdit = (item: any) => {
  editItem.list = item;
  editdrawershow.value = true;
};
//开关函数
const handleChange = (item: any) => {
  if (item.frozen === true) {
    const res = proxy.$HTTP.post({
      url: `/manager/org/${item.id}/frozen`,
      data: {
        frozen: false,
      },
    });
    res.then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({
          message: "启用成功",
        });
        item.frozen = false;
      }
    });
    res.catch((error: any) => {
      if (error.data instanceof Array) {
        showErrorMessage({
          message: error.data[0].errorMsg,
        });
      } else {
        showErrorMessage({
          message: error.data,
        });
      }
    });
  } else {
    const res = proxy.$HTTP.post({
      url: `/manager/org/${item.id}/frozen`,
      data: {
        frozen: true,
      },
    });
    res.then((res: any) => {
      if (res.isOk) {
        showSuccessMessage({
          message: "禁用成功",
        });
        item.frozen = true;
      }
    });
    res.catch((error: any) => {
      if (error.data instanceof Array) {
        showErrorMessage({
          message: error.data[0].errorMsg,
        });
      } else {
        showErrorMessage({
          message: error.data,
        });
      }
    });
  }
};
</script>

<template>
  <div class="page-details">
    <el-table
      ref="multipleTable"
      v-loading="props.isListLoading"
      :data="props.tableData"
      stripe
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        label="组织名称"
        prop="orgName"
        width="500px"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="状态" prop="frozen">
        <template #default="scope">
          <el-switch
            :value="!scope.row.frozen"
            @change="handleChange(scope.row)"
            inactive-color="#f2f2f6"
            active-color="#55d66b"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <span class="operation" @click="handleEdit(scope.row)"
            ><el-tooltip
              content="编辑"
              transition="none"
              :hide-after="0"
              placement="top"
              ><img src="@/assets/img/host-config/bedit.png" /></el-tooltip
          ></span>
          <span class="operation">
            <lanius-pop-confirm
              title="删除提示"
              :content="'确定删除' + scope.row.orgName + '?'"
              @confirm="handleDelete(scope.row)"
            >
              <div style="display: inline">
                <el-tooltip
                  content="删除"
                  placement="top"
                  transition="none"
                  :hide-after="0"
                >
                  <img src="@/assets/img/common/delete.png" />
                </el-tooltip>
              </div>
            </lanius-pop-confirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
    v-model="editdrawershow"
    v-if="editdrawershow"
    title="编辑"
    :width="740"
    :direction="editdirection"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <!-- 编辑弹窗 -->
    <organization-editor
      :handleEditFunc="handleEditFunc"
      :editItem="editItem.list"
    ></organization-editor>
  </el-dialog>
</template>

<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background-color: rgba(106, 106, 106, 1);
  color: #fff;
}

.el-popper.is-customized .el-popper__arrow::before {
  background-color: rgba(106, 106, 106, 1);
  right: 0;
}
</style>
<style scoped lang="scss">
.operation {
  padding: 0 5px;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.page-details {
  margin-top: 15px;
}

.el-table {
  :deep(th) {
    background-color: #fafafa;
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(td) {
    height: 40px;
    line-height: 40px;
    padding: 0;
    border-bottom: 0 !important;
    &:first-child {
      padding-left: 40px;
    }
  }
  :deep(.el-table__row--striped) {
    td {
      background-color: rgba($color: #f6f6f6, $alpha: 0.56) !important;
    }
  }
  :deep(.el-table__inner-wrapper) {
    &::before {
      height: 0;
    }
  }
}
</style>
